<template>
  <div class="menu-b">
    <Menu
      text-color="#666"
      active-text-color="#fff"
      :default-active=" this.menu && this.menu[0] ? this.menu && this.menu[0] && this.menu[0].article_category_id + '' : ''"
      @select="handleSelect"
    >
      <menu-item
        v-for="(item, index) in menu"
        :key="index"
        :index="item.article_category_id + ''"
        @click="handleItemClick(item)"
      >
        <div class="menu-item-wrap">
          <img :src="item.image" alt="" />
          <span slot="title">{{ item.title }}</span>
        </div>
      </menu-item>
    </Menu>
  </div>
</template>

<script>
import { Menu, MenuItem } from "element-ui"

export default {
  name: "MenuB",
  components: { Menu, MenuItem },
  props: {
    menu: {
      type: Array,
      default: []
    }
  },
  data() {
    return {
      defaultIndex: ""
    }
  },
  methods: {
    handleSelect(index, indexPath) {
      this.$emit("getSelectId", index)
    },
    handleItemClick(item) {
      console.log(item)
      // this.$emit('item-click', item)
    }
  }
}
</script>

<style lang="scss" scoped>
@import "~@/assets/style/common.scss";

.menu-b {
  /deep/ .el-menu-item.is-active {
    background-color: $theme-color-1;
  }

  .menu-item-wrap {
    text-align: left;
    display: flex;
    align-items: center;

    img {
      border-radius: 50%;
      object-fit: contain;
      margin-right: 20px;
      width: 30px;
          height: 30px;
          // object-fit: cover;
    }
  }
}
</style>
